<template>
  <div class="box">
    <div class="box1">
      <header>
        <div class="inp">
          <i class="el-icon-arrow-left"></i>
          <div class="inps">
            <i class="el-icon-search"></i>
            <input type="text" placeholder="重返1991">
          </div>
          <p>搜索</p>
        </div>
      </header>
      <div class="search">
        <div class="top">
          <p>推荐搜索</p>
          <i class="el-icon-refresh"></i>
        </div>
        <ul>
          <li v-for="item in list" :key="item.id">
            {{ item.name }}
          </li>
        </ul>
      </div>

    </div>
    <div class="main">
      <div class="top">
        <i class="el-icon-trophy"></i>
        <p>全網熱搜</p>
      </div>
      <ul>
        <li v-for="item in searchList" :key="item.id">
          <span>{{ item.id }}</span>
          <img :src="item.imgUrl" alt="">
          <div class="title">
            <p>{{ item.name }}</p>
            <span>{{ item.title }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { search, quan_search } from '@/mockApi//search.js'
export default {
  data() {
    return {
      list: [],
      searchList: []
    }
  },
  mounted() {
    this.getSearch();
    this.getSearchList()
  },
  methods: {
    async getSearch() {
      const result = await search({
        method: 'get',
        url: '/search'
      })
      console.log(result);
      this.list = result.data.data

    },
    async getSearchList() {
      const result = await quan_search({
        method: 'get',
        url: '/quan_search'
      })
      this.searchList = result.data.data
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  background: url("~@/assets//书单推荐必读书单长图海报.jpg@3x.png")no-repeat center center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;

  .box1 {
    width: 92%;
    margin: auto;

    .inp {
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .inps {
        border: 1px solid #ccc;
        border-radius: 20px;
        height: 30px;
        width: 70%;
        color: #ccc;
        display: flex;
        align-items: center;

        i {
          margin: 0 10px;
        }

        input {
          outline: none;
          border: none;
          background-color: rgba(255, 255, 255, 0);
        }
      }
    }
  }

  .search {
    width: 100%;
    height: 122px;
    background: rgba(190, 145, 97, 1);
    border-radius: 20px 20px 0 0;
    opacity: 0.75;
    margin-top: 10px;
    box-shadow: 0px 0px 0px 0px rgba(74, 17, 25, 0.1), 0px 9px 20px 0px rgba(74, 17, 25, 0.1), 0px 36px 36px 0px rgba(74, 17, 25, 0.09), 0px 82px 49px 0px rgba(74, 17, 25, 0.05), 0px 146px 58px 0px rgba(74, 17, 25, 0.01), 0px 228px 64px 0px rgba(74, 17, 25, 0);

    .top {
      height: 35px;
      width: 97%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
    }

    ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;

      li {
        border-radius: 15px;
        background-color: #fff;
        color: #000;
        font-size: 12px;
        line-height: 24px;
        padding: 0 6px;
        margin: 10px;

      }
    }

  }

  .main {
    background: rgba(252, 236, 204, 1);
    width: 100%;
    height: 100%;

    .top {
      width: 92%;
      height: 40px;
      margin: auto;
      display: flex;
      align-items: center;
    }

    ul {
      display: flex;
      // flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;

      li {
        width: 50%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        span {
          color: rgba(253, 94, 64, 1)
        }

        img {
          width: 50px;
          height: 66.67px;
          opacity: 1;
          border-radius: 5px;
        }

        .title {
          width: 35%;
          p{
            font-size: 14px;
          }
          span {
            font-size: 12px;
            color: #ccc;
          }
        }
      }
    }
  }
}</style>